<template>
  <div class="page" :class="{'no-btn': !hasBtn}">
    <div class="title">
      <span class="ui-icon" :class="icon ? 'ui-icon__' + icon : ''"></span>
      <span>{{title}}</span>
    </div>
    <div 
      class="inner"
      :class="[
        isShowBtn ? '' : 'inner_full'
      ]">
      <div 
        id="content" 
        class="content"
        :style="contentHeight">
        <slot></slot>
      </div>
    </div>
    <button v-if="hasBtn && isShowBtn" @click="$emit('click')" class="main-button">{{btnName}}</button>
  </div>
</template>

<script>
  export default {
    name: 'GzhbPage',
    data() {
      return {
        icon: '',
        isShowBtn: true,
        contentHeight:{
          height:''
        }
      }
    },
    props: {
      hasBtn: {
        type: Boolean,
        default() {
          return true
        }
      },
      title: {
        type: String,
        default() {
          return '标题'
        }
      },
      btnName: {
        type: String,
        default() {
          return '按钮'
        }
      }
    },
    created() {
      let oldInnerHeight = window.innerHeight
      window.addEventListener('resize', () => {
        let newInnerHeight = window.innerHeight
        if(oldInnerHeight > newInnerHeight){
          this.isShowBtn = false
          this.contentHeight.height = window.innerHeight + 'px'  
        } else {
          this.isShowBtn = true          
          this.contentHeight.height = ''  
        }
      })

      switch(this.title) {
        case '进度详情':
          this.icon = 'jdxq'
        break
        case '进度汇报':
          this.icon = 'jdhb'
        break
        case '任务详情':
          this.icon = 'rwxq'
        break
      }
    }
  }
</script>

<style lang="less" scoped>
.page {
  position: relative;
  color: #313133;
  height: 100%;
  background-image: linear-gradient(#2baefe, #f1f1f1);
  padding-top: calc(var(--vh) * 4.6181);
  .title {
    position: absolute;
    width: 46%;
    left: 52%;
    margin-left: -25%;
    top: calc((var(--vh) * 8.2) - (var(--vh) * 7));
    height: calc(var(--vh) * 7);
    line-height: calc(var(--vh) * 7);
    text-align: center;
    background-color: #006fb6;
    border-radius: calc(var(--vh) * 7);
    font-size: calc(var(--vh) * 2.4866);
    color: #fff;
    z-index: 999;
    .ui-icon {
      margin-right: 4px;
    }
  }

  .inner {
    width: 93.75%;
    box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    background-color: #fff;
    height: calc(var(--vh) * 88.3658);
    border-top-left-radius: calc(var(--vh) * 1.42);
    border-top-right-radius: calc(var(--vh) * 1.42);
    padding-top: calc(var(--vh) * 3.55);
    overflow: hidden;
    .content {
      height: calc(var(--vh) * 84.9023);
      overflow-y: auto;
      padding: 0 3.125vw;
    }
  }
  .inner_full{
    height: 100%;
  }

  .main-button {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--vh) * 7.09);
    background-color: #ffba00;
    text-align: center;
    color: #fff;
    font-size: calc(var(--vh) * 2.4866);
  }
  &.no-btn {
    .inner {
      height: calc(var(--vh) * 96);
    }
    .content {
      height: 100%;
    }
  }
}
</style>